<template>
  <page-box>
    <div class="ui-search-box" slot="search-form">
      <el-form class="ui-search-form" label-width="120px" :model="params" ref="form">
        <el-form-item label="选择月份" prop="dsMonth">
          <el-date-picker
            v-model="params.dsMonth"
            type="monthrange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="每页数据">
          <el-select size="mini" class="ui-item-reset" v-model="params.pageSize">
            <el-option label="5" :value="5"></el-option>
            <el-option label="10" :value="10"></el-option>
            <el-option label="20" :value="20"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-dialog :visible.sync="chartFlag2" width="800px" @opened="getChart2">
        <el-form :model="chartItem4">
          <el-form-item prop="dsMonth">
            <el-date-picker
              v-model="chartItem4.dsMonth"
              type="monthrange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              size="small"
              @change="getChartList2">
            </el-date-picker>
          </el-form-item>
          <div style="width: 750px;height:400px;" id="echart2"></div>
        </el-form>
      </el-dialog>
      <el-dialog :visible.sync="chartFlag3" width="750px" @opened="getChart3">
        <el-form class="ui-search-form" label-width="120px" :model="chartItem5">
          <el-form-item label="月份" prop="dsMonth">
            <el-date-picker
              v-model="chartItem5.dsMonth"
              type="monthrange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              size="small"
              @change="getChartList3">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="宿舍楼" prop="buildingNo">
            <el-select v-model="chartItem5.buildingNo" placeholder="宿舍号" size="small" @change="getChartList3">
              <el-option
                v-for="item in buildingNoList"
                :key="item.buildingNo"
                :label="item.buildingNo"
                :value="item.buildingNo">
              </el-option>
            </el-select>
          </el-form-item>
          <div style="width: 700px;height:400px;" id="echart3"></div>
        </el-form>
      </el-dialog>
      <el-dialog :visible.sync="chartTotalFlag" width="30%" title="选择统计图类型">
        <el-select v-model="value" placeholder="请选择" size="small" @change="chartKinds">
          <el-option
            v-for="item in chartKindOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-dialog>

      <div class="ui-search-btus">
        <el-button type="primary" size="mini" @click="chartTotalFlag=true">统计图</el-button>
        <el-button type="primary" size="mini" @click="getData">搜索</el-button>
        <el-button size="mini" @click="resetForm('form')">重置</el-button>
      </div>
    </div>
    <div class="ui-list ui-box" slot="list-box">
      <div class="box-header ui-list-header">
        <div>宿舍卫生列表</div>
        <div>
<!--          <el-button type="primary" size="mini" @click="exportDsExcel">导出</el-button>-->
        </div>
      </div>
      <el-table :data="dataList" @selection-change="handleSelectionChange" :cell-style="cellStyle"
                :header-cell-style="rowClass" v-loading="tabLoading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="dsMonth" label="月份"></el-table-column>
        <el-table-column prop="dsDorHygiene" label="宿舍卫生等级">
          <template v-if="scope.row.dsDorHygiene!=null" slot-scope="scope">
            <span v-if="scope.row.dsDorHygiene===1">优</span>
            <span v-if="scope.row.dsDorHygiene===2">良</span>
            <span v-if="scope.row.dsDorHygiene===3">差</span>
          </template>
        </el-table-column>
        <el-table-column prop="dsDorHygieneDetail" label="宿舍卫生详情"></el-table-column>
        <el-table-column prop="buildingNo" label="宿舍楼"></el-table-column>
        <el-table-column prop="dorNo" label="宿舍号"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status===1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="openEdit(scope.row)">修改</el-button>
            <!--            <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="ui-pagination"
        @current-change="changPageNum"
        layout="total, prev, pager, next"
        :current-page="this.params.pageNum"
        :page-size="this.params.pageSize"
        :total="total">
      </el-pagination>
      <edit-item v-bind:dorHygieneItem.sync='dorHygieneItem' @submit="editItem" ref="editItem"></edit-item>
    </div>
  </page-box>
</template>
<script>
  import pageBox from '@/components/pageBox'
  import editItem from '@/components/dormitoryService/dorHygiene/editItem.vue'


  export default {
    name: 'dorHygieneList',
    components: {
      pageBox, editItem
    },
    data() {
      return {
        dataList: [],
        exportList: [],
        params: {
          dsId: '',
          dsMonth: '',
          pageNum: 1,
          pageSize: 10,
          startTime: '',
          endTime: '',
        },
        total: 0,
        tabLoading: false,
        dorHygieneItem: {
          dsId: '',
          dsMonth: '',
          dsDorHygiene: '',
          dsDorHygieneDetail: '',
          buildingNo: '',
          dorNo: '',
          status: ''
        },

        buildingNoList: [],
        chartTotalFlag: false,
        chartFlag1: false,
        chartFlag2: false,
        chartFlag3: false,
        option_chart: {},
        option_chart2: {},
        option_chart3: {},
        chartItem4: {
          type: 4,
          startTime: '',
          endTime: '',
          dsMonth: ['2020-01-01', '2020-01-01'],
        },
        chartItem5: {
          type: 5,
          startTime: '',
          endTime: '',
          dsMonth: ['2020-01-01', '2020-01-01'],
          buildingNo: 1
        },
        chartKindOptions: [
          {
            label: '某月份各宿舍楼总卫生情况',
            value: 2
          }, {
            label: '某月份某宿舍楼各宿舍卫生情况',
            value: 3
          }
        ],
        value: ''
      }
    },
    created() {
      this.getData()
      this.getBuildingNo()

    },
    methods: {
      chartKinds(value) {
        if (value === 2) {
          this.chartFlag2 = true;
        } else if (value === 3) {
          this.chartFlag3 = true;
        }
      },
      getChart2() {
        this.getChartList2()
        this.chartFlag2 = true;
      },
      getChart3() {
        this.getChartList3()
        this.chartFlag3 = true;
      },
      getChartList2() {
        this.chartItem4.startTime = this.chartItem4.dsMonth[0]
        this.chartItem4.endTime = this.chartItem4.dsMonth[1]
        post('/pms_api/dormitoryService/chart', this.chartItem4).then(res => {
          let excellentList = []
          let goodList = []
          let differenceList = []
          for (let i in res.data) {
            excellentList.push(res.data[i].excellent)
            goodList.push(res.data[i].good)
            differenceList.push(res.data[i].difference)
          }
          this.option_chart2 = {
            legend: {
              data: ['优', '良', '差']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
              // formatter: function (params) {
              //   return params[0].name + "<br>" + params[0].seriesName + ":" + params[0].data + "个"
              //     + "<br>" + params[1].seriesName + ":" + params[1].data + "个"
              //     + "<br>" + params[2].seriesName + ":" + params[2].data + "个"
              // }
            },
            title: {
              text: '各宿舍楼卫生情况',
            },
            toolbox: {
              show: true,
              feature: {
                saveAsImage: {show: true},
                magicType: {show: true, type: [ 'bar']},
                restore: {show: true},
              }
            },
            calculable: true,
            xAxis: {
              name: '宿舍楼',
              type: 'category',
              data: ['1栋', '2栋', '3栋', '4栋', '5栋', '6栋', '7栋'],
            },
            yAxis:
              [
                // {type:'value'}
                {
                  type: 'value',
                  name: '获得不同等级个数',
                  axisLabel: {
                    formatter: '{value} 个'
                  }
                }
              ],
            series: [
              {
                name: '优',
                type: 'bar',
                data: excellentList,
                // markPoint: {
                //   data: [
                //     {type: 'max', name: '最大值'},
                //     {type: 'min', name: '最小值'}
                //   ]
                // },
              },
              {
                name: '良',
                type: 'bar',
                data: goodList,
                // markPoint: {
                //   data: [
                //     {type: 'max', name: '最大值'},
                //     {type: 'min', name: '最小值'}
                //   ]
                // },
              },
              {
                name: '差',
                type: 'bar',
                data: differenceList,
                // markPoint: {
                //   data: [
                //     {type: 'max', name: '最大值'},
                //     {type: 'min', name: '最小值'}
                //   ]
                // },
              }
            ]
          }

          let chart = this.$echarts.init(document.querySelector('#echart2'))
          chart.setOption(this.option_chart2)
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      getChartList3() {
        this.chartItem5.startTime = this.chartItem5.dsMonth[0]
        this.chartItem5.endTime = this.chartItem5.dsMonth[1]
        post('/pms_api/dormitoryService/chart', this.chartItem5).then(res => {
          let excellentList = []
          let goodList = []
          let differenceList = []
          let dorNoList = []
          for (let i in res.data) {
            excellentList.push(res.data[i].excellent)
            goodList.push(res.data[i].good)
            differenceList.push(res.data[i].difference)
            dorNoList.push(res.data[i].dorNo)
          }
          this.option_chart3 = {
            legend: {
              data: ['优', '良', '差']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            title: {
              text: this.chartItem5.buildingNo + '栋各宿舍卫生情况',
            },
            toolbox: {
              show: true,
              feature: {
                // dataView: {show: true, readOnly: false},
                magicType: {show: true, type: [ 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            calculable: true,
            xAxis: {
              name:'宿舍号',
              type: 'category',
              data: dorNoList,
            },
            yAxis: [
              {
                type: 'value',
                name: '获得不同等级个数',
                axisLabel: {
                  formatter: '{value} 个'
                }
              }
            ],
            series: [
              {
                name: '优',
                type: 'bar',
                data: excellentList,
                // markPoint: {
                //   data: [
                //     {type: 'max', name: '最大值'},
                //     {type: 'min', name: '最小值'}
                //   ]
                // },
              },
              {
                name: '良',
                type: 'bar',
                data: goodList,
                // markPoint: {
                //   data: [
                //     {type: 'max', name: '最大值'},
                //     {type: 'min', name: '最小值'}
                //   ]
                // },
              },
              {
                name: '差',
                type: 'bar',
                data: differenceList,
                // markPoint: {
                //   data: [
                //     {type: 'max', name: '最大值'},
                //     {type: 'min', name: '最小值'}
                //   ]
                // },
              }
            ]
          }
          let chart = this.$echarts.init(document.querySelector('#echart3'))
          chart.setOption(this.option_chart3)
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      getBuildingNo() {
        post('/pms_api/dormitory/list', {'type': 1}).then(res => {
          this.buildingNoList = res.data
          this.tabLoading = false;
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },


      editItem() {
        // this.tabLoading = true;
        post('/pms_api/dormitoryService/edit', this.dorHygieneItem).then(res => {
          this.$refs.editItem.editDialogVisible = false;
          console.log('res', res);
          this.getData();
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
        this.$refs.editDor.addDialogVisible = false;
      },
      openEdit(item) {
        this.getDormitoryService(item);
        this.$refs.editItem.openWindow('宿舍卫生情况表单', this.dorHygieneItem);
      },
      changPageNum(val) {
        this.params.pageNum = val
        this.getData()
      },
      getDormitoryService(item) {
        post(`/pms_api/dormitoryService/detail`, {'dsId': item.dsId}).then(res => {
          this.dorHygieneItem = res.data[0]
        }).catch(err => {
          console.log(err)
        })
      },
      getData() {
        if (this.params.dsMonth != null) {
          this.params.startTime = this.params.dsMonth[0]
          this.params.endTime = this.params.dsMonth[1]
          // this.params.dsMonth = ""
        }
        post('/pms_api/dormitoryService/list', this.params).then(res => {
          this.dataList = res.data
          this.total = res.totalPages
          console.log(res.data)
          this.tabLoading = false
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      checkDetail(item) {
        this.$router.push({
          path: '/dormitoryServiceDetail',
          query: {
            dsId: item.dsId
          }
        })
      },
      deleteItem(item) {
        post('/pms_api/dormitoryService/delete', {'dsId': item.dsId}).then(res => {
          this.getData()
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
      },
      handleSelectionChange(val) {
        this.exportDsList = val
      },
      exportDsExcel() {
        if (this.exportDsList.length > 0) {
          const tHeader = ['宿舍服务号', '水费', '宿舍卫生', '宿舍卫生', '宿舍卫生情况', '月份', '宿舍楼', '宿舍号', '状态'];
          const filterVal = ['dsId', 'dsWaterBill', 'dsDorHygiene', 'dsDorHygiene', 'dsDorHygiene', 'dsMonth', 'buildingNo', 'dorNo', 'status'];
          const list = this.exportDsList;
          this.$getGlobal.exportFun('报修详情', tHeader, filterVal, list);
        } else {
          this.$message.error('请先选择需要导出的列表项');
        }
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.getData()
      },
    }
  }
</script>


